<template>
    <el-table :data="data" :highlight-current-row="highlightCurrentRow" v-loading="loading"
        :element-loading-text="$t('loading')" :border="border" :stripe="stripe"
        :show-overflow-tooltip="showOverflowTooltip" :max-height="maxHeight" :size="size" :align="align"
        style="width:100%;">
        <el-table-column type="selection" width="40" v-if="showBatchDelete && showOperation"></el-table-column>
        <el-table-column v-for="column in columns" :prop="column.prop" :label="column.label" :width="column.width"
            :fixed="column.fixed" :key="column.prop" :type="column.type" :formatter="column.formatter"
            :sortable="column.sortable == null ? true : column.sortable">
        </el-table-column>
        <el-table-column :label="$t('handle')" width="185" fixed="right" v-if="showOperation">
            <template #default="scope">
                <BTButton link type="primary" :label="$t('edit')" :perms="permsEdit" :size="size"
                    @click="handleEdit(scope.$index, scope.row)" />
                <BTButton link :label="$t('delete')" :perms="permsDelete" :size="size" type="danger"
                    @click="handleDelete(scope.$index, scope.row)" />
            </template>
        </el-table-column>
    </el-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import BTButton from '@/BTButton.vue';
const props = defineProps({
    permsEdit: String,  // 编辑权限标识
    permsDelete: String,  // 删除权限标识
    columns: Array as any, // 表格列配置
    data: Array, // 表格分页数据
    size: { // 尺寸样式
        type: String,
        default: 'default'
    },
    align: {  // 文本对齐方式
        type: String,
        default: 'left'
    },
    maxHeight: {  // 表格最大高度
        type: Number,
        default: 420
    },
    showOperation: {  // 是否显示操作组件
        type: Boolean,
        default: true
    },
    border: {  // 是否显示边框
        type: Boolean,
        default: false
    },
    stripe: {  // 是否显示斑马线
        type: Boolean,
        default: true
    },
    highlightCurrentRow: {  // 是否高亮当前行
        type: Boolean,
        default: true
    },
    showOverflowTooltip: {  // 是否单行显示
        type: Boolean,
        default: true
    },
    showBatchDelete: {  // 是否显示操作组件
        type: Boolean,
        default: true
    }
});

const loading = ref(false);

const emit = defineEmits(['handleEdit', 'handleDelete']);

//编辑
const handleEdit = (index: any, row: any) => {
    emit("handleEdit", row);
}

//删除
const handleDelete = (index: any, row: any) => {
    emit('handleDelete', row);
}
</script>
<style scoped lang="scss"></style>